{% load admin_list adminlte_list %}
{% load i18n %}

<div class="row">
    <div class="col-sm-5">
        <div class="dataTables_info" id="example2_info" role="status" aria-live="polite">
            {{ cl.result_count }}
            {% if cl.result_count == 1 %}
                {{ cl.opts.verbose_name }}
            {% else %}
                {{ cl.opts.verbose_name_plural }}
            {% endif %}

            {% if show_all_url %}&nbsp;&nbsp;<a href="{{ show_all_url }}"
                                                class="showall">{% trans 'Show all' %}</a>{% endif %}
            {% if cl.formset and cl.result_count %}<input type="submit" name="_save"
                                                          class="btn btn-primary"
                                                          value="{% trans 'Save' %}">{% endif %}
        </div>
    </div>

    <div class="col-sm-7">
        <div class="dataTables_paginate paging_simple_numbers"
             id="example2_paginate">
            <ul class="pagination">
                {% if pagination_required %}
                    <li class="paginate_button previous disabled"
                        id="example2_previous">
                        <a href="#" aria-controls="example2" data-dt-idx="0"
                           tabindex="0">{% trans 'Previous' %}</a></li>
                    {% for i in page_range %}
                        {% adminlte_paginator_number cl i %}
                    {% endfor %}
                    <li class="paginate_button next disabled" id="example2_next">
                        <a href="#"
                           aria-controls="example2"
                           data-dt-idx="7"
                           tabindex="0">{% trans 'Next' %}</a>
                    </li>
                    <script type="text/javascript">
                        let pageRange = []
                        {% for p in page_range %}
                            pageRange.push('{{ p }}')
                        {% endfor %}
                        // console.log(pageRange)
                        let currentPage = document.querySelector("#example2_paginate > ul > li.active > a").innerText
                        let previous = document.querySelector("#example2_previous > a")
                        let next = document.querySelector("#example2_next > a")
                        let target_href = window.location.search.replace(/\?p=\d+/g, '').replace(/&p=\d+/g, '')
                        // previous button
                        if ((Number(pageRange[0]) + 1).toString() !== currentPage) {
                            previous.parentElement.setAttribute('class', 'paginate_button previous')
                            previous.setAttribute('href', target_href? target_href + `&p=${Number(currentPage) -2}`: target_href + `?p=${Number(currentPage) -2}`)
                        } else {
                            previous.parentElement.setAttribute('class', 'paginate_button previous disabled')
                            previous.setAttribute('href', 'javascript:void(0);')
                        }
                        // next button
                        if ((Number(pageRange[pageRange.length-1]) + 1).toString() !== currentPage) {
                            next.parentElement.setAttribute('class', 'paginate_button next')
                            next.setAttribute('href', target_href? target_href + `&p=${currentPage}`: target_href + `?p=${currentPage}`)
                        } else {
                            next.parentElement.setAttribute('class', 'paginate_button next disabled')
                            next.setAttribute('href', 'javascript:void(0);')
                        }
                    </script>
                {% endif %}
            </ul>
        </div>
    </div>
</div>
